<!--
 * @Author: 刘佳欢 2173558681@qq.com
 * @Date: 2022-11-16 20:17:34
 * @LastEditors: 刘佳欢 2173558681@qq.com
 * @LastEditTime: 2025-09-26 21:33:14
 * @FilePath: \团队项目\am-ui\src\views\dashboard\components\C223.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="chart-box" ref="c223"></div>
</template>

<script>
import { get } from '@/utils/request';
import { Column } from '@antv/g2plot';

export default {
  data() {
    return {
      columnData: [], // 存储接口返回的柱状图数据
    };
  },
  methods: {
    renderColumn() {
      const columnPlot = new Column(this.$refs.c223, {
        data: this.columnData,
        xField: 'type',
        yField: 'value',
        columnStyle: {
          radius: [20, 20, 0, 0],
        },

        label: {
          position: 'middle', // 数值标签在柱子中间
          style: {
            fill: '#FFFFFF',
            opacity: 0.6,
          },
        },
        xAxis: {
          label: {
            autoHide: true,
            autoRotate: false,
          },
        },
      });
      columnPlot.render();
    },
    async getColumnData() {
      let res = await get('/dashboard/queryEngineerBindDeviceNumber');
      this.columnData = res.data;

    },
  },
  async mounted() {
    // 先请求接口，再渲染图表
    await this.getColumnData();
    this.renderColumn();
  },
};
</script>

<style scoped>
.chart-box {
  width: 100%;
  height: 190px;
  margin: 20px auto;
}
</style>